<template>
  <div>
    <header>
      <i class="iconfont icon-zuojiantou" @click="funa()"></i>
      <p>&nbsp;&nbsp;&nbsp;歌房</p>
    </header>
    <nav>
      <ul>
        <li
          v-for="(v, i) in arr"
          :key="i"
          @click="fun(i)"
          :class="{ yangshi: a == i }"
        >
          {{ v.vg }}
        </li>
      </ul>
    </nav>
    <main>
      <div class="left"><p>创建房间</p></div>
      <div class="right"><p>房主榜</p></div>
    </main>
    <p class="one">猜你喜欢</p>
    <section>
      <div class="dis">
        <dl>
          <dt v-for="(vue, index) in newarr" :key="index">
            <img :src="vue.imgurl" />
          </dt>
        </dl>
      </div>
    </section>
    <p class="two">为你推荐</p>
    <footer>
      <div class="color" v-for="(v, i) in arr" :key="i">
        <div class="top">
          <p class="touming">趣味K歌</p>
          <p><i class="iconfont icon-bofang3"></i>&nbsp;&nbsp;平凡的一天</p>
        </div>
        <div class="content">
          <p>练歌&nbsp;|&nbsp;自主上麦&nbsp;你唱我听</p>
        </div>
        <div class="bottom">
          <div class="leftimg">
            <img
              :src="vimg.smallimg"
              v-for="(vimg, iimg) in imgarr"
              :key="iimg"
            />
          </div>
          <div><p>19人&nbsp;&nbsp;&nbsp;&nbsp;</p></div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {
    fun(i) {
      this.a = i;
    },
    funa() {
      this.$router.push("/home");
    },
  },
  data() {
    return {
      a: "0",
      arr: [
        { vg: "全部" },
        { vg: "最新" },
        { vg: "欢唱KTV" },
        { vg: "聊天室" },
        { vg: "游戏房" },
        { vg: "听歌自习" },
        { vg: "热榜" },
      ],
      newarr: [
        {
          imgurl:
            "https://img2.baidu.com/it/u=601888734,2695691869&fm=26&fmt=auto",
        },
        {
          imgurl:
            "https://img2.baidu.com/it/u=601888734,2695691869&fm=26&fmt=auto",
        },
        {
          imgurl:
            "https://img2.baidu.com/it/u=601888734,2695691869&fm=26&fmt=auto",
        },
        {
          imgurl:
            "https://img2.baidu.com/it/u=601888734,2695691869&fm=26&fmt=auto",
        },
        {
          imgurl:
            "https://img2.baidu.com/it/u=601888734,2695691869&fm=26&fmt=auto",
        },
        {
          imgurl:
            "https://img2.baidu.com/it/u=601888734,2695691869&fm=26&fmt=auto",
        },
      ],
      imgarr: [
        {
          smallimg:
            "http://p2.music.126.net/bR06xO9qqbHcurtPMDAD5g==/109951166373683577.jpg?param=40x40",
        },
        {
          smallimg:
            "http://p1.music.126.net/8ijjMDjtiXM9sig35ytoug==/109951166371604990.jpg?param=40x40",
        },
        {
          smallimg:
            "http://p1.music.126.net/5W3ks0VusNpdP0FkcgHfPQ==/109951166369052743.jpg?param=40x40",
        },
        {
          smallimg:
            "http://p1.music.126.net/DLbTACBzS549DyoDBipRHw==/109951166367540657.jpg?param=40x40",
        },
        {
          smallimg:
            "http://p1.music.126.net/E0si_Jh5zeN6d0MzlMlCAg==/109951166363548855.jpg?param=40x40",
        },
      ],
    };
  },
};
</script>

<style scoped>
.leftimg {
  display: flex;
}
.leftimg img {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0.2rem;
  position: absolute;
}
.leftimg img:nth-child(5) {
  margin-left: 0.2rem;
}
.leftimg img:nth-child(4) {
  margin-left: 0.5rem;
}
.leftimg img:nth-child(3) {
  margin-left: 0.8rem;
}
.leftimg img:nth-child(2) {
  margin-left: 1.1rem;
}
.leftimg img:nth-child(1) {
  margin-left: 1.4rem;
}
.bottom {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
}
.content {
  margin-top: 0.15rem;
  font-size: 0.26rem;
  font-weight: 600;
  margin-left: 0.12rem;
}
.touming {
  background-color: rgb(111 111 111 /20%);
  border-radius: 0.3rem;
  width: 1rem;
  height: 0.3rem;
  text-align: center;
}
.top {
  display: flex;
  width: 80%;
  justify-content: space-around;
  margin-top: 0.1rem;
}
footer {
  display: flex;
  flex-wrap: wrap;
}
.color {
  width: 3.4rem;
  height: 2.5rem;
  background: radial-gradient(pink, black);
  border-radius: 0.3rem;
  margin-top: 0.3rem;
  color: #fff;
  margin-left: 0.3rem;
  position: relative;
  /* flex-wrap: wrap; */
  /* display: flex; */
}
.two {
  font-size: 0.3rem;
  font-weight: 600;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
}
.dis {
  overflow: auto;
}
img {
  width: 100%;
  height: 2.1rem;
}
dl {
  display: flex;
  width: 200%;
}
dt {
  width: 2.1rem;
  height: 2.1rem;
  background-color: aquamarine;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
}
.one {
  font-size: 0.3rem;
  font-weight: 600;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
}
main {
  display: flex;
  justify-content: space-evenly;
  margin-top: 0.2rem;
}
.left {
  width: 40%;
  height: 0.75rem;
  background-color: coral;
  border-radius: 0.3rem;
  text-align: center;
  line-height: 0.75rem;
  font-size: 0.25rem;
  font-weight: 600;
}
.right {
  width: 40%;
  height: 0.75rem;
  background-color: aquamarine;
  border-radius: 0.3rem;
  text-align: center;
  line-height: 0.75rem;
  font-weight: 600;
  font-size: 0.25rem;
}
.yangshi {
  color: red;
  font-weight: 600;
}
header {
  display: flex;
  font-size: 0.3rem;
  height: 1rem;
  line-height: 1rem;
}
.icon-zuojiantou {
  font-size: 0.5rem;
  margin-left: 0.4rem;
}
nav {
  overflow: auto;
}
ul {
  width: 130%;
  height: 1rem;
  display: flex;
  line-height: 1rem;
}
li {
  font-size: 0.3rem;
  width: 1.5rem;
  text-align: center;
}
</style>